<template>
  <div class="footGuide">
    <mt-tabbar v-model="selected" fixed >
      <mt-tab-item id="home" >

        <div class="mytab-item" @click = "gotoAddress('/')" >
          <div class="icon">
            <img class="icon1" src="../assets/footer1.png"  v-if="selected!='home'" />
            <img class="icon1" src="../assets/footer12.png" v-if="selected=='home'" />
          </div>
          <div class="font">首页</div>
        </div>
      </mt-tab-item>
      <mt-tab-item id="content" >
        <div class="mytab-item" @click = "gotoAddress('/content')" >
          <div class="icon">
            <img class="icon1" src="../assets/footer2.png" v-if="selected!='content'"/>
            <img class="icon1" src="../assets/footer22.png" v-if="selected =='content'"/>
          </div>
          <div class="font">内容</div>
        </div>
      </mt-tab-item>
      <mt-tab-item id="sale" >
        <div class="mytab-item sale" @click = "gotoAddress('/sale')" >
          <div class="icon">
            <img class="icon2" src="../assets/footer3.png">
          </div>
          <div class="bg">
            <img class="bg2" src="../assets/footer32.png">
          </div>
        </div>
      </mt-tab-item>
      <mt-tab-item id="shop">
        <div class="mytab-item" @click = "gotoAddress('/shop')" >
          <div class="icon">
            <img class="icon1" src="../assets/footer4.png" v-if="selected!='shop'"/>
            <img class="icon1" src="../assets/footer42.png" v-if="selected=='shop'"/>
          </div>
          <div class="font">商城</div>
        </div>
      </mt-tab-item>
      <mt-tab-item id="me">
        <div class="mytab-item" @click = "gotoAddress('/me')" >
          <div class="icon">
            <img class="icon1" src="../assets/footer5.png" v-if="selected!='me'"/>
            <img class="icon1" src="../assets/footer52.png" v-if="selected=='me'"/>
          </div>
          <div class="font">我</div>
        </div>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>


export default {
  name: 'footGuide',
  data () {
    return {
      selected:'home',
      token:sessionStorage.user && JSON.parse(sessionStorage.user).token || ''
    }
  },
  created:function(){

    var hashUrl = window.location.hash;
    // console.log(hashUrl.split('/').length)
    var currenhash = hashUrl.split('/')[1];
    if(currenhash == ''){

      this.selected = 'home';
    }
    else{
      this.selected = currenhash;
    }

//    console.log(this.selected)
    if(this.token){

      this.getmsgFn();

      clearInterval(utilities.timer);
      clearInterval(utilities.timer1);
      var _this = this;
      utilities.timer = setInterval(function () {

        _this.getmsgFn();

      },2000);

    }

  },
  methods: {
    gotoAddress(path){
      this.$router.push(path)
    },
    getmsgFn(){

      var _this = this;
      var chartNum = {};
      chartNum.token = _this.token;

        $.ajax({
          type: 'post',
          url: RouteMap.chartNum,
          data: chartNum,
          success: function (res) {
            if (res.code == 200) {

              if(utilities.isNull(res.data)){
                return;
              }

              if(res.data.num ==0){

                return;
              }
//                res.data.num = 2;
              console.log(res.data.num);
              if(res.data.num !=0){
                $('.mint-tab-item').css('position','relative')
                $('.message-con').find('a').css('position','relative')
                var str = '<span class="mynum" style="position: absolute; right: 10px;top: -5px;color: #fff; background-color: #b01f24; display: inline-block; width: 18px; height: 18px; border-radius: 20px; font-size: 12px; line-height: 18px; text-align: center ">'+ res.data.num +'</span>';
                $('.mint-tab-item').eq(4).append(str);

                $('.message-con').find('a').eq(0).append(str);

              }

            }

          }
        })
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.mytab-item .icon{ width: 1.33rem ;text-align: center; display: inline-block;}
.mytab-item .icon img{ width: .914rem; height:.89rem;}
.mytab-item .icon img.icon2{ width:1.36rem; height:1.36rem; position:relative; z-index: 2;}
.mytab-item .font{ font-size: .34rem; padding-top: .133rem;}


.mint-tabbar > .mint-tab-item.is-selected {
  color:#B01F24;
  background-color:#f5f5f5;

}
.sale{position: relative;}
  .bg{
    position:absolute;
    bottom:-0.4rem;
    left:0.44rem;
    width:2.34rem;
    z-index: 1;
  }
  .bg img{
    width:100%;
  }
.mint-tabbar{
  background: #f5f5f5;
}
</style>
